<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        .div1{
            width:31%;
          height: 31%;
            border-radius: 50%;
            border: 1px solid #000000;
            background-size: 100px 100px;
        }
        .div2{
            margin: auto;
            height: 310px;
            width: 310px;
            overflow: hidden;
            cursor: url("img/33.png"),default;
        }
     .div2 .div1{
            float: left;
        }
    .div3{
        font-size: 20px;
        width: 150px;
        height: 25px;
        margin: auto;
        margin-top: 20px;
        text-align: center;
    }
    .div4{
             font-size: 20px;
             width: 300px;
             height: 25px;
             margin: auto;
             margin-top: 20px;
        text-align: center;
         }
        .div5{
            font-size: 20px;
            width: 300px;
            height: 25px;
            margin: auto;
           padding-left: 180px;
            margin-top: 20px;
        }
        .bu1{
            margin: auto;
            text-align: center;
        }

    </style>
</head>
<body>
<div class="div5">倒计时：60</div>
<div class="div2">
    <div class="div1" sq="0" ></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
    <div class="div1" sq="0"></div>
</div>
<div class="div3">得分：0</div>
<div class="div4"></div>
<div class="bu1">
    <button onclick="ks();"> 开始游戏</button>

</div>

<script>
    var fs= 0;
    var q1=699,q2=700;
    var set1;
    var set;
    var qq;
    //动态加载背景图和随机出现位置

    function ks(){
        ss=60;
        clearInterval(set);
        clearTimeout(set1);
        clearInterval(qq);
        $("div").children(".div1").css({
                backgroundImage:"url(img/3.jpg)"})
        set=setInterval(
                function(){
                    var sjs = Math.floor(Math.random()*9);
                    $(".div1").eq(sjs).css({
                        backgroundImage:"url(img/22.png)"
                    })
                    $(".div1").eq(sjs).attr("sq","1");
                    set1=setTimeout(

                            function(){

                                $(".div1").eq(sjs).css({
                                    backgroundImage:"url(img/3.jpg)"
                                })
                                $(".div1").eq(sjs).attr("sq","0")
                                if(ss==0){
                                    clearInterval(set)
                                    clearTimeout(set1)
                                    $(".div3").html("时间到，游戏结束!")
                                    $(".div4").html("")
                                }

                            },q1
                    )
                },q2)


//    倒计时
        qq=setInterval(function(){
            ss--;
            $(".div5").html("倒计时:"+ss)
            if(ss==0){
                clearInterval(qq);
                ss=0;
            }
        },1000)


//    单击判断
        $(".div2 div").on("click",function(){
            var hh,
                    hh= $(this).attr("sq")
            $(".div2").css({
                cursor:"url(img/334.png),default"
            })
            setTimeout(function(){
                        $(".div2").css({
                            cursor:"url(img/33.png),default"
                        })
                    },200

            )

            if(hh==1){
                fs++;
                $(this).css({backgroundImage:"url(img/1.jpg)"})

                $(this).attr("sq","0")
                $(".div3").html("得分："+fs)
                if(fs>8 && fs<13){
                    q1=599;
                    q2=600;
                }else if(fs>=13&& fs<16){
                    q1=499;
                    q2=500;
                } else if(fs>=16&& fs<20){
                    q1=299;
                    q2=300;
                    $(".div4").html("你还能跟上，皮皮虾的速度嘛？")
                }else if(fs>=20){
                    clearInterval(set);
                    clearTimeout(set1);
                    clearInterval(qq);
                    $(".div3").html("过关！")
                    $(".div4").html("")
                }
            }
        })
    }






</script>
</body>
</html>